<template>
	<view class="main">
		<view class="card">
			<!-- 筛选 -->
			<view class="choose">
				<view @click="change(0)" class="flex flex-ai-c">
					<text>本月({{start}}～{{end}})</text>
					<u-icon name="arrow-down" size="24rpx"></u-icon>
				</view>
				<view @click="change(1)" class="flex flex-ai-c flex-jc-fe" style="width: 250rpx;">
					<text class="s-line-text">{{device_name?device_name:'全部设备明细'}}</text>
					<u-icon name="arrow-down" size="24rpx"></u-icon>
				</view>
			</view>

			<!-- 统计 -->
			<view class="chart">
				<view>
					<text>销售额(元)</text>
					<text>{{info.order_total_money}}</text>
				</view>
				<view>
					<text>{{swiperCurrent?'收入':'收入'}}</text>
					<text>{{info.between_dividend_money}}</text>
				</view>
				<view>
					<text>退款(元)</text>
					<text>{{info.order_total_return_money}}</text>
				</view>

			</view>

			<!-- 内容 -->
			<view class="content">
				<view v-for="(item,index) in info.list" :key="item.id" class="flex flex-ai-c flex-jc-sb"
					style="padding: 20rpx;" @click.stop="link(item)">
					<view class="img">
						<i-icon icon="zhangdan" size="60rpx" />
					</view>
					<view class="content-order">
						<view class="s-line-text">订单号：{{item.order_sn}}</view>
						<view v-if="item.goods_info.length">
							<text>{{item.goods_info[0].goods_name}}</text>
						</view>
						<view>{{item.oktime}}</view>
					</view>
					<view class="content-price flex flex-dir-c flex-jc-sb">
						<text>￥{{item.order_money}}</text>
						<text>+{{item.dividend_money}}</text>
					</view>
				</view>
				<u-loadmore v-if="info.list.length" marginTop="20" marginBottom="20" :status="loadStatus" @loadmore="scrolltolower" />
			</view>
		</view>

	</view>
</template>

<script>
	import devicePopup from '@/components/devicePopup.vue'
	export default {
		name: 'incomeList',
		components: {
			devicePopup
		},
		props: {
			info: {
				type: Object,
				default: () => {}
			},
			swiperCurrent: {
				type: Number,
				default: 0
			},
			time: {
				type: Array,
				default: () => []
			},
			device_name: {
				type: String,
				default: ''
			},
			loadStatus: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				start: '',
				end: ''
			}
		},
		watch: {
			time(value) {
				this.start = new Date(value[0]).getMonth() + 1 + '月' + new Date(value[0]).getDate() + '日'
				this.end = new Date(value[1]).getMonth() + 1 + '月' + new Date(value[1]).getDate() + '日'
			}
		},
		mounted() {
			this.start = new Date(this.time[0]).getMonth() + 1 + '月' + new Date(this.time[0]).getDate() + '日'
			this.end = new Date(this.time[1]).getMonth() + 1 + '月' + new Date(this.time[1]).getDate() + '日'
		},
		methods: {
			scrolltolower(){
				this.$emit('scrolltolower')
			},
			link(item) {
				uni.navigateTo({
					url: `/pages/orderForm/details?id=${item.order_id}`
				})
			},
			change(type) {
				this.$emit('change', type)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {

		// 筛选
		.choose {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 40rpx 0rpx 40rpx;

			&>view {
				text {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-right: 10rpx;
				}

				image {
					width: 16rpx;
					height: 10rpx;
				}
			}
		}

		// 统计
		.chart {
			margin-top: 30rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			padding-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #F4F4F4;

			&>view {
				display: flex;
				flex-direction: column;
				align-items: center;

				&>text:nth-child(1) {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-bottom: 14rpx;
				}

				&>text:nth-child(2) {
					font-size: 42rpx;
					font-family: Avenir-Medium, Avenir;
					font-weight: 500;
					color: #333333;
				}
			}
		}

		// 内容
		.content {

			&>view {
				padding: 30rpx 0;

				&:not(:last-child) {
					border-bottom: 1px solid #F4F4F4;
				}

				image {
					width: 56rpx;
					height: 56rpx;
				}

				.img {
					width: 10%;
				}

				.content-order {
					width: 60%;

					&>view:nth-child(1) {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					&>view:nth-child(2) {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;

						text {
							font-size: 30rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							margin: 16rpx 0;


						}


					}

					&>view:nth-child(3) {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

				}

				.content-price {
					width: 25%;
					text-align: right;

					&>text:nth-child(1) {
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;
					}

					&>text:nth-child(2) {
						font-size: 36rpx;
						font-weight: 500;
						color: #F95533;
						margin-top: 40rpx;
					}
				}
			}

		}
	}

	.card {
		background: #fff;
	}
</style>